<template>
  <div class="expert-item">
    <img
        :src="expert.imageUrl? expert.imageUrl : defaultImageUrl"
        alt="Expert Image"
    />
    <div class="expert-info">
      <h3>{{ expert.name }}</h3>
      <div class="expert-tags">
        <span>{{ expert.level }}</span>
        <span>从业 {{ expert.yearsOfExperience }} 年</span>
      </div>
      <p>{{ expert.introduction }}</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

// 引入默认图像，根据实际路径修改
const defaultImageUrl = '/src/assets/img/picture/default-expert.jpg';

const props = defineProps({
  expert: {
    type: Object,
    required: true
  }
});
</script>

<style scoped>
.expert-item {
  width: calc(25% - 15px);
  margin-bottom: 20px;
  text-align: center;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  padding-top: 100px;
}

.expert-item img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid yellow;
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
}

.expert-info {
  padding: 20px;
}

.expert-info h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}

.expert-tags {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.expert-tags span {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  color: white;
}

.expert-tags span:nth-child(1) {
  background-color: #003366;
}

.expert-tags span:nth-child(2) {
  background-color: #66a3ff;
}

.expert-info p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}
</style>